<%--
  Created by IntelliJ IDEA.
  User: CHJYPC
  Date: 2021/6/20
  Time: 17:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班级详情</title>
    <script src="${rootPath}resources/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${rootPath}resources/css/clazzdesc.css">

</head>
<body onload="init( '${clazzid}')">
<div class="wrapper">
    <div class="header">
        <div class="divheaderleft">
            <div class="divclazzname"><h2>班级名称：</h2>
                <p> ${clazzname}</p></div>
            <div class="divclazzid"><h2>班级编号：</h2>
                <p> ${clazzid}</p></div>
            <div class="tabletitle"><h2>成员列表</h2></div>
        </div>
        <div class="divheaderright">
            <%--${member.memberid}--%>
            <div><input type="button" value="发起签到" onclick="openInputName()"></div>
            <div class="tabletitle"><h2>出勤列表</h2></div>
        </div>
    </div>
    <div class="divleft">
    </div>
    <div class="divright">

    </div>
</div>

<div class="divqdName" id="divQDinputName">
    <div class="divinputNuber">请输入签到名称：<input name="QDname" id="QDname"></div>
    <div class="divinputbutton">
        <input value=" 取消 " type="button" onclick="closeInputName()">
        <input value="确定" name="" type="button" onclick="return openSelect()">
    </div>
</div>
<div class="divSelectMethon">
    <div>
        <button onclick="openNumber()">数字签到</button>
        <button onclick="openQR()">二维码签到</button>
    </div>
</div>


<div class="divqd" id="divNumQD" style="display: none">
    <div class="divinputNuber">
        <div id="qdNmuber"></div>
    </div>
    <input value="结束签到" name="" type="button" onclick="endNum()">
</div>

<div class="divqd" id="divQrQD" style="display: none" >
    <div class="divimg"><img id="QRsrc" src="" alt=""></div>
    <input value="结束签到" name="" type="button" onclick="endQR()">
</div>

</body>
<script>
    function init(clazzid) {
        // var clazzid = $("#requestClazzid").val();
        // alert("班级id：" + clazzid);
        $.get("ClazzMemberServlet?clazzid=" + clazzid, function (data, status) {
            // alert("数据: " + data + "\n状态: " + status);
            var dataJson = JSON.parse(data);
            var $ul = $("<ul class=\"clazzUL\"\>");
            $ul.appendTo(".divleft");//把新创建的ul元素放入div内部，并且放入div的最后//使用其他可以放到最前
            $.each(dataJson, function (index, member) {
                var $li = $("<li class=\"clazzULli\"   onclick=\" submit(" + member.loginid + ");\"  \>");
                if (member.permission == 0) {
                    var $a = $("<p class=\"pclazzname\" >" + member.name + "(" + member.loginid + ")" + "</p>" + "<p class=\"pclazzid\">" + "教师" + "</p>");
                } else {
                    var $a = $("<p class=\"pclazzname\" >" + member.name + "(" + member.loginid + ")" + "</p>" + "<p class=\"pclazzid\">" + "学生" + "</p>");
                }
                $a.appendTo($li);
                $ul.append($li);
            });
        });

        // divright
        $.get("AttendanceDateServlet?clazzid=" + clazzid, function (data, status) {
            // alert("数据: " + data + "\n状态: " + status);
            var dataJson = JSON.parse(data);
            var $ul = $("<ul class=\"clazzUL\"\>");
            $ul.appendTo(".divright");//把新创建的ul元素放入div内部，并且放入div的最后//使用其他可以放到最前
            $.each(dataJson, function (index, attendanceDate) {
                var $li = $("<li class=\"clazzULli\"   onclick=\" submit(" + ");\"  \>");
                var $a = $("<p class=\"pclazzname\" >" + attendanceDate.atname + "</p>" + "<p class=\"pclazzid\">" + "签到人数：" + attendanceDate.count + "</p>");
                $a.appendTo($li);
                $ul.append($li);
            });
        });
    }

    // divright
    function openInputName() {
        $(".divqdName").css({display: "block"});
    }

    function openSelect() {
        var name = $("#QDname").val();
        if (name == null || name == undefined || name == "") {
            alert("请输入本次签到的名称！")
            return false;
        }
        $(".divqdName").css({display: "none"});

        $(".divSelectMethon").css({display: "block"});
        return true
    }

    function closeInputName() {
        $(".divqdName").css({display: "none"});
    }


    function openNumber() {
        $(".divSelectMethon").css({display: "none"});
        //数字签到开始
        var name = $("#QDname").val();
        var claid =${clazzid};
        var memid =${member.memberid};

        var x = 9999;
        var y = 1000;
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        var key = rand;
        $("#qdNmuber").text(key);

        $.post("Attendance",
            {
                op: "start",
                atname: name,
                clazzid: claid,
                memberid: memid,
                attype: "数字",
                key: key
            },
            function (data, status) {
                alert("数据: \n" + data + "\n状态: " + status);
            });

        $("#divNumQD").css({display: "block"});
    }

    function openQR() {
        $(".divSelectMethon").css({display: "none"});
        //二维码签到开始
        var name = $("#QDname").val();
        var claid =${clazzid};
        var memid =${member.memberid};

        var x = 9999;
        var y = 1000;
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        var key = rand;
        $("#qdNmuber").text(key);

        // QRsrc
        var path = "https://api.pwmqr.com/qrcode/create/?url=www.yuanmengrobot.love/Attendance?key=" + key;
        $("#QRsrc").attr('src', path);
        $.post("Attendance",
            {
                op: "start",
                atname: name,
                clazzid: claid,
                memberid: memid,
                attype: "二维码",
                key: key
            },
            function (data, status) {
                alert("数据: \n" + data + "\n状态: " + status);
            });


        $("#divQrQD").css({display: "block"});
    }

    function endNum() {
        $("#divNumQD").css({display: "none"});
        //结束数字签到
        var name = $("#QDname").val();
        var claid =${clazzid};
        var memid =${member.memberid};
        $.post("Attendance",
            {
                op: "end",
                atname: name,
                clazzid: claid,
                memberid: memid,
                attype: "数字"
            },
            function (data, status) {
                alert("数据: \n" + data + "\n状态: " + status);
            });

    }

    function endQR() {
        $("#divQrQD").css({display: "none"});
        //结束二维码签到
        var name = $("#QDname").val();
        var claid =${clazzid};
        var memid =${member.memberid};
        $.post("Attendance",
            {
                op: "end",
                atname: name,
                clazzid: claid,
                memberid: memid,
                attype: "二维码"
            },
            function (data, status) {
                alert("数据: \n" + data + "\n状态: " + status);
            });
    }

</script>


</html>
